<template>
	<view class="page-container pb-0 bg-grey">
		<up-navbar safeAreaInsetTop fixed placeholder title="达人笔记" :autoBack="true"></up-navbar>
		<zjy-search placeholder="搜索景点/酒店等关键词" @search="search" />
		<zjy-filters :data="filterData" @close="filterClose" />
		<scroll-view
			:scroll-y="true"
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="triggered"
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore"
			@refresherabort="onAbort"
			class="plr-24 pt-32"
			:style="{
				height: scrollViewHeight,
			}"
		>
			<template v-if="listData && listData.length > 0">
				<view class="flex">
					<view class="flex-1 mr-18">
						<view
							v-for="(item, index) in leftList"
							:key="index"
							class="material-item"
							@click="toDetail(item)"
						>
							<image :src="item.cover_url" class="cover" mode="aspectFill" />
							<view class="content">
								<view class="font-bold">{{ item.title }}</view>
								<view class="flex-a space-between mt-20">
									<view class="flex-a">
										<image :src="item.author_avatar" class="icon-32 circle" mode="aspectFill" />
										<text class="fs-22 c-grey-86 ml-8 m-w-180 text-ellipsis">
											{{ item.author_name }}
										</text>
									</view>
									<view class="flex-a" @click.stop="favorite(item)">
										<image
											v-if="item.like"
											:src="imgBaseUrl + 'icon-like-fill.png'"
											class="icon-24 mr-6"
										/>
										<image v-else :src="imgBaseUrl + 'icon-like.png'" class="icon-24 mr-6" />
										<text class="c-grey-86">{{ item.like_count }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-1">
						<view
							v-for="(item, index) in rightList"
							:key="index"
							class="material-item"
							@click="toDetail(item)"
						>
							<image :src="item.cover_url" class="cover" mode="aspectFill" />
							<view class="content">
								<view class="font-bold">{{ item.title }}</view>
								<view class="flex-a space-between mt-20">
									<view class="flex-a">
										<image :src="item.author_avatar" class="icon-32 circle" mode="aspectFill" />
										<text class="fs-22 c-grey-86 ml-8 m-w-180 text-ellipsis">
											{{ item.author_name }}
										</text>
									</view>
									<view class="flex-a" @click.stop="favorite(item)">
										<image
											v-if="item.like"
											:src="imgBaseUrl + 'icon-like-fill.png'"
											class="icon-24 mr-6"
										/>
										<image v-else :src="imgBaseUrl + 'icon-like.png'" class="icon-24 mr-6" />
										<text class="c-grey-86">{{ item.like_count }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<zjy-empty emptyText="暂无数据" v-else-if="!freshing && searched"></zjy-empty>
		</scroll-view>
	</view>
</template>
<script setup lang="ts">
import { NoteSortList } from "@/components/zjy-filters/constant"
import { getArticleTags, getPublicPageWithResort } from "@/components/zjy-filters/service"
import zjyFilters from "@/components/zjy-filters/index.vue"
import useCommonStore from "@/store/common"
import { freshLoading } from "@/utils/fresh-loading"
import { onLoad } from "@dcloudio/uni-app"
import { navigateTo } from "@/utils/page-redirect"
import { $articleCancelFavorite, $articleFavorite, $getArticleList } from "@/api/feed/note"

const imgBaseUrl = inject("imgBaseUrl")
const commonStore = useCommonStore()
const scrollViewHeight = `calc(100vh - ${commonStore.statusBarHeight + commonStore.navbarHeight}px - 176rpx)`
const leftList = ref<any[]>([])
const rightList = ref<any[]>([])
const filterParams = ref<any>({})

const search = (searchKey: string) => {
	filterParams.value.searchKey = searchKey
	getListData(true)
}
const toDetail = (item: any) => {
	if (item.type == 20) {
		navigateTo("/pages/feed/note/article", { id: item.id })
	} else {
		navigateTo("/pages/feed/note/note", { id: item.id })
	}
}
const favorite = (item: any) => {
	if (item.like) {
		//取消点赞
		$articleCancelFavorite(item.id).then(() => {
			uni.$emit("articleFavorite", { id: item.id, favorite: false })
		})
	} else {
		//点赞
		$articleFavorite(item.id).then(() => {
			uni.$emit("articleFavorite", { id: item.id, favorite: true })
		})
	}
}
const watchFavorite = () => {
	uni.$on("articleFavorite", ({ id, favorite }) => {
		let findItem = leftList.value.find((item) => item.id == id) || rightList.value.find((item) => item.id == id)
		findItem.like = favorite
		findItem.like_count += favorite ? 1 : -1
	})
}
//#region 初始化下拉刷新
const freshLoadingRef = freshLoading()
let {
	loadMore,
	triggered,
	onPulling,
	onRefresh,
	onRestore,
	onAbort,
	getListData,
	getListSuccessCallback,
	updateListParams,
	listData,
	searched,
	freshing,
} = freshLoadingRef
freshLoadingRef.listService.value = $getArticleList
updateListParams.value = () => filterParams.value
getListSuccessCallback.value = () => {
	leftList.value = []
	rightList.value = []
	listData.value.map((item, index) => {
		if (index % 2 === 0) {
			leftList.value.push(item)
		} else {
			rightList.value.push(item)
		}
	})
}
//#endregion

//#region 筛选
const filterData = ref<any[]>([])
const filterClose = (data: any) => {
	filterParams.value = {
		...filterParams.value,
		...data,
	}
	getListData(true)
}
const initFilter = async () => {
	let areaResorts: any = await getPublicPageWithResort()
	let tags = await getArticleTags()
	filterData.value = [
		{
			title: "全部景区",
			key: "resortIdStr",
			type: "scenic",
			value: areaResorts[0].resorts[0].id,
			data: areaResorts,
		},
		{
			title: "综合排序",
			key: "orderingType",
			type: "single",
			value: NoteSortList[0].id,
			data: NoteSortList,
		},
		{
			title: "筛选",
			key: "tagIdStr",
			type: "group",
			data: tags,
		},
	]
}
//#endregion
onLoad(() => {
	initFilter()
	getListData()
	watchFavorite()
})
</script>
<style lang="scss" scoped>
.material-item {
	width: 100%;
	display: inline-flex;
	flex-direction: column;
	background: $c-white;
	border-radius: 16rpx;
	margin-bottom: 18rpx;
	overflow: hidden;
	.cover {
		width: 100%;
		height: 456rpx;
	}
	.content {
		padding: 20rpx 16rpx 24rpx;
	}
}
.scale-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: $c-black-_5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 24rpx;
	z-index: 999;
	.cover {
		width: 100%;
		height: 936rpx;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.save-picture {
		margin-top: 64rpx;
		padding: 20rpx 32rpx;
		transform: rotate(360deg);
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: $c-white;
		background: $c-white-_1;
		border: 1rpx solid $c-white-_2;
		border-radius: 64rpx;
	}
}
</style>
